import { Card, Col, Row, Space, Tag } from 'antd';
import React, {  useState } from 'react';

import * as c from '@/services/consts';
// import * as api from '@/services/report';
import { PageContainer } from '@ant-design/pro-components';
import ProForm, {
  ProFormDateTimeRangePicker,
  ProFormSelect,
} from '@ant-design/pro-form';
import dayjs from 'dayjs';
import { useModel } from 'umi';

const List: React.FC = () => {
  const { hasRight } = useModel('useAuthModel');

  if (!hasRight('report_userstatchart')) {
    return <></>;
  }

  const {
    globalGrafanaModel,
  } = useModel('useGlobalModel', (model) => ({
    globalGrafanaModel: model.globalGrafanaModel,
  }));

  // let urlGrafana = "http://38.91.102.64:3000/d/SQJgQAp4z/biubiu_stat?orgId=1&theme=light&kiosk&refresh=15s&var-device=All&to=now";
  //let baseUrlGrafana = "https://grafana.biubiuvpn.app:8443/d/SQJgQAp4z/biubiu_stat?orgId=1&theme=light&kiosk&refresh=15s&var-device=All";//&to=now
  // const [urlGrafanaFormHour, setUrlGrafanaFormHour] = useState<string>("now-24h");
  // const [baseUrlGrafana, setBaseUrlGrafana] = useState<string | undefined>(
  //   undefined,
  // );
  const [statTitle, setStatTitle] = useState<string>('24小时');
  const [urlGrafanaInterval, setUrlGrafanaInterval] = useState<string>('5m');
  // const [urlGrafana, setUrlGrafana] = useState<string|undefined>(undefined);
  const [urlGrafana, setUrlGrafana] = useState<string | undefined>(
    '&to=now&from=now-24h',
  );

  

  // const loadData = async () => {
  //   const result = await api.userStatChart();

  //   if (result.success) {
  //     setBaseUrlGrafana(result.urlGrafanaUserStat);
  //     // setUrlGrafana(`${result.urlGrafanaUserStat}&to=now&from=now-24h`)
  //     // setUrlGrafana(`&to=now&from=now-24h`)
  //   }

  //   return Promise.resolve(result);
  // };

  // useEffect(() => {
  //   loadData();
  // }, []);

  return (
    <PageContainer>
      <Card
        // loading={baseUrlGrafana ? false : true}
        extra={
          <ProForm
            layout="horizontal"
            submitter={{
              render: (props, doms) => {
                return (
                  <Row>
                    <Col span={1} offset={0}>
                      <Space></Space>
                    </Col>
                  </Row>
                );
              },
            }}
            style={{ marginBottom: -40 }}
          >
            <ProForm.Group>
              <ProFormSelect
                name="grafanaHour"
                label="监控时长"
                width={200}
                allowClear={true}
                initialValue={'now-24h'}
                options={c.GrafanaStatHours}
                fieldProps={{
                  onChange: (val, option: API.Option) => {
                    //console.log(option);
                    // setUrlGrafanaFormHour(val);

                    setStatTitle(option.label);
                    // setUrlGrafana(`${baseUrlGrafana}&to=now&from=${val}`);
                    setUrlGrafana(`&to=now&from=${val}`);
                  },
                }}
              />
              <ProFormDateTimeRangePicker
                name="dateTimeRange"
                label="时间区间"
                fieldProps={{
                  showTime: {
                    defaultValue: [
                      dayjs('00:00:00', 'HH:mm:ss'),
                      dayjs('00:00:00', 'HH:mm:ss'),
                    ],
                  },
                  onChange: (values) => {
                    if (values) {
                      //console.log(values, values[0]?.format("X"), values[1]?.format("X"), values[1]?.format("yyyy-MM-DD HH:mm:ss"));
                      setStatTitle(
                        `${values[0]?.format(
                          'YYYY-MM-DD HH:mm:ss',
                        )} - ${values[1]?.format('YYYY-MM-DD HH:mm:ss')}`,
                      );
                      // setUrlGrafana(`${baseUrlGrafana}&to=${values[1]?.format("x")}&from=${values[0]?.format("x")}`);
                      setUrlGrafana(
                        `&to=${values[1]?.format('x')}&from=${values[0]?.format(
                          'x',
                        )}`,
                      );
                    }
                  },
                }}
              />
              <ProFormSelect
                name="grafanaInterval"
                label="监控数据间隔"
                width={200}
                allowClear={true}
                initialValue={'5m'}
                options={c.GrafanaStatInterval}
                fieldProps={{
                  onChange: (val) => {
                    setUrlGrafanaInterval(val);
                  },
                }}
              />
            </ProForm.Group>
          </ProForm>
        }
      >
        <Space>
          <Tag color="red" style={{ marginBottom: 10, fontSize: 14 }}>
            <b>监控时间：{statTitle}</b>
          </Tag>
        </Space>
        {/* <iframe src={`${urlGrafana}&var-interval=${urlGrafanaInterval}`} width="100%" height="3500" style={{border:0}}></iframe> */}
        <iframe
          src={`${globalGrafanaModel?.urlGrafanaUserStatChart}${urlGrafana}&var-interval=${urlGrafanaInterval}`}
          width="100%"
          height="3500"
          style={{ border: 0 }}
        ></iframe>
      </Card>
    </PageContainer>
  );
};

export default List;
